<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar">文档</i></el-breadcrumb-item>
                <el-breadcrumb-item>文档下载</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-upload
                    class="upload-demo"
                    drag
                    action="http://jsonplaceholder.typicode.com/api/posts/"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">文档<em>点击下载</em></div>
            </el-upload>
        </div>
    </div>
</template>

<script>
  import VueCropper  from 'vue-cropperjs';
  export default {
    name: 'upload',
    data: function(){
      return {
        defaultSrc: require('../../assets/img/img.jpg'),
        fileList: [],
        imgSrc: '',
        cropImg: '',
        dialogVisible: false,
      }
    },
    components: {
      VueCropper
    },
    methods:{
      setImage(e){
        const file = e.target.files[0];
        if (!file.type.includes('image/')) {
          return;
        }
        const reader = new FileReader();
        reader.onload = (event) => {
          this.dialogVisible = true;
          this.imgSrc = event.target.result;
          this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
        };
        reader.readAsDataURL(file);
      },
      cropImage () {
        this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
      },
      cancelCrop(){
        this.dialogVisible = false;
        this.cropImg = this.defaultSrc;
      },
      imageuploaded(res) {
        console.log(res)
      },
      handleError(){
        this.$notify.error({
          title: '上传失败',
          message: '图片上传接口上传失败，可更改为自己的服务器接口'
        });
      }
    },
    created(){
      this.cropImg = this.defaultSrc;
    }
  }
</script>

<style scoped>
    .content-title{
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }
    .pre-img{
        width: 100px;
        height: 100px;
        background: #f8f8f8;
        border: 1px solid #eee;
        border-radius: 5px;
    }
    .crop-demo{
        display: flex;
        align-items: flex-end;
    }
    .crop-demo-btn{
        position: relative;
        width: 100px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        margin-left: 30px;
        background-color: #409eff;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .crop-input{
        position: absolute;
        width: 100px;
        height: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }
</style>